<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心悦小说</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1977519_98pjeekfro.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/public.css">
</head>

<body>
    <header>
        <ul class="head-list">
            <li class="backk">
                <a href="#" class="iconfont iconarrowleft"></a>
            </li>
            <li class="app-name">心悦小说</li>
            <li>
                <a href="./search.html" class="iconfont iconsearch2"></a>
                <a href="./login.html" class="iconfont iconuser_line"></a>
            </li>
        </ul>
    </header>
    <nav>
        <ul class="nav">
            <li>
                <a href="./bag.html">书包</a>
            </li>
            <li>
                <a href="javascript:void(0);" class="nav-on">精选</a>
            </li>
            <li>
                <a href="./rank.html">排行</a>
            </li>
            <li>
                <a href="./cate.html">分类</a>
            </li>
        </ul>
    </nav>
    
    <div class="item">
        <img src="./img/index-item01.jpg" alt="">
        <img src="./img/index-item02.jpg" alt="">
    </div>
    <div class="leibie">
        <span>男生</span>
        <span>女生</span>
        <span>完本</span>
    </div>
    <div class="wapper">
        <div class="toutiao">
            <div class="toutiao-header"><span class="first">重磅推荐</span></div>
            <!-- 渲染重磅推荐 -->
        </div>

        <div class="shangjia">
            <div class="toutiao-header"><span class="booktype1">男生爱看</span></div>
            <span id="diyi" style="display: none;">玄幻男</span>
            <div class="tab">
                <ul class="tab-header">
                    <li class="link">玄幻</li>
                    <li id="dier">都市</li>
                    <li id="dishan">精选</li>
                    <li id="dishi">影视</li>
                </ul>
                <div class="tab-cnt">
                    <div class="show" id="diyis">
                        <!-- 玄幻首条渲染 -->

                        <a href="#" class="shangjia-item01">
                            <div>至尊狂神</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>丹师剑宗</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>无上丹尊-梦醒泪殇</div>
                            <div></div>
                        </a>
                        <a href="./boy.html" class="shangjia-item01">
                            <div>进入男生爱看</div>
                        </a>

                    </div>
                    <div id="diers">
                        <!-- 都市首条渲染 -->
                        <a href="#" class="shangjia-item01">
                            <div>王牌赢家</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>极品狂医-二两馒头</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>神医不凡</div>
                            <div></div>
                        </a>
                        <a href="./boy.html" class="shangjia-item01">
                            <div>进入男生爱看</div>
                        </a>

                    </div>
                    <div id="dishans">
                        <!-- 精选首条渲染 -->
                        <a href="#" class="shangjia-item01">
                            <div>网游之九转轮回</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>玄阳天尊</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>我在丹田种棵树</div>
                            <div></div>
                        </a>
                        <a href="./boy.html" class="shangjia-item01">
                            <div>进入男生爱看</div>
                        </a>
                    </div>
                    <div id="dishis">
                        <!-- 影视首条渲染 -->
                        <a href="#" class="shangjia-item01">
                            <div>重生之老子是皇帝</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>跃马大明</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>雄霸大明朝</div>
                            <div></div>
                        </a>
                        <a href="./boy.html" class="shangjia-item01">
                            <div>进入男生爱看</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="shangjia">
            <div class="toutiao-header"><span class="booktype2">女生爱看</span></div>
            <div class="tab">
                <ul class="tab-header">
                    <li id="diyi2" class="link">豪门</li>
                    <li id="dier2">穿越</li>
                    <li id="dishan2">幻想</li>
                    <li id="dishi2">影视</li>
                </ul>
                <div class="tab-cnt">
                    <div class="show" id="diyis2">
                        <!-- 首条渲染区 -->
                        <a href="#" class="shangjia-item01">
                            <div>高冷boss抱回家</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>双宝来袭：爹地狂傲如火</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>婚情蜜宠：宋太太，有点甜</div>
                            <div></div>
                        </a>
                        <a href="./girl.html" class="shangjia-item01">
                            <div>进入女生爱看</div>
                        </a>
                    </div>
                    <div id="diers2">
                        <!-- 首条渲染区 -->
                        <a href="#" class="shangjia-item01">
                            <div>重回儿时拐男神</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>穿越之背靠系统好乘凉</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>重生八零：发家致富养崽崽</div>
                            <div></div>
                        </a>
                        <a href="./girl.html" class="shangjia-item01">
                            <div>进入女生爱看</div>
                        </a>
                    </div>
                    <div id="dishans2">
                        <!-- 首条渲染区 -->
                        <a href="#" class="shangjia-item01">
                            <div>重生之庶女凰后</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>庶女绝色，鬼帝大人求放过</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>农家傻女</div>
                            <div></div>
                        </a>
                        <a href="./girl.html" class="shangjia-item01">
                            <div>进入女生爱看</div>
                        </a>
                    </div>
                    <div id="dishis2">
                        <!-- 首条渲染区 -->
                        <a href="#" class="shangjia-item01">
                            <div>初晨，是我故意忘记你2</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>美人为馅</div>
                            <div></div>
                        </a>
                        <a href="#" class="shangjia-item01">
                            <div>橙红年代</div>
                            <div></div>
                        </a>
                        <a href="./girl.html" class="shangjia-item01">
                            <div>进入女生爱看</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="haoshu">
            <div class="toutiao-header"><span class="third">类型阅读</span></div>
            <!-- 渲染区 -->
        </div>
        <a href="./wanben.html" class="shangjia-item01" id="weih">
            <span class="leix">类型阅读</span>
        </a>
        <footer>
            <div class="foot-logo">
                <img src="./images/decoration.png" alt="">
                <span class="iconfont iconbaidu"></span>
                <img src="./images/decoration.png" class="dec-right" alt="">
            </div>
            <div class="foot-line"></div>
            <div class="foot-txt">
                <p>“比鬼神更可怕的，是人心。”</p>
                <p class="source">--小艾同学</p>
            </div>
            <div class="foot-line foot-line-bottom"></div>
        </footer>
    </div>
</body>
<script src="./javascripts/ajax.js"></script>
<script src="./javascripts/select.js"></script>
<script src="./javascripts/indexshow.js"></script>
<script src="./javascripts/back2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./javascripts/click.js"></script>
<script>
    var span = document.querySelectorAll('span');
    console.log(span);
    span[0].onclick = function(){   
        location.href = 'boy.html';
    }
    span[1].onclick = function(){
        location.href = 'girl.html';
    }
    span[2].onclick = function(){
        location.href = 'wanben.html';
    }
</script>
</html>